<template>
  <el-card>
    <el-button
      type="primary"
      icon="el-icon-plus"
      size="small"
      @click="addSpu"
      :disabled="!category.category3Id"
    >
      添加SPU
    </el-button>
    <br />
    <br />
    <el-table :data="tableData" v-loading="isLoading" border class="mb-20">
      <el-table-column
        type="index"
        label="序号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            icon="el-icon-plus"
            type="primary"
            size="mini"
            @click="addSkuClick(row)"
          ></el-button>
          <el-button
            icon="el-icon-edit"
            type="warning"
            size="mini"
            @click="editSpu(row)"
          ></el-button>
          <el-button
            icon="el-icon-info"
            type="info"
            size="mini"
            @click="getSku(row)"
          ></el-button>
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="mini"
            @click="delSpu(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="100"
      layout=" prev, pager, next, jumper, sizes, total"
      :total="pagination.total"
    />

    <el-dialog
      :title="`${skuListName} => SKU列表`"
      :visible.sync="dialogVisible"
      top="0"
    >
      <el-table :data="skuList">
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="价格（元）" prop="price"></el-table-column>
        <el-table-column label="重量（KG）" prop="weight"></el-table-column>
        <el-table-column label="默认图片" align="center">
          <template #default="{ row }">
            <img :src="row.skuDefaultImg" alt="" class="sku-img" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script>
import { getSpuListApi, deleteSpuApi } from '@/api/product/spuApi'
import { getkuBySpuIdApi } from '@/api/product/skuApi'
import { mapState } from 'vuex'
export default {
  name: 'SpuList',
  data() {
    return {
      isLoading: false,
      pagination: {
        page: 1,
        limit: 3,
        total: 0
      },
      tableData: [],

      skuList: [],
      dialogVisible: false,
      skuListName: ''
    }
  },
  computed: {
    ...mapState('category', ['category'])
  },
  watch: {
    'category.category3Id': {
      handler() {
        this.getSpusList()
      },
      immediate: true
    },
    pagination: {
      handler() {
        this.getSpusList()
      },
      deep: true
    }
  },

  methods: {
    // 跳转到添加skuye页面
    addSkuClick(row) {
      this.$emit('changShowNum', row)
    },
    // 封装获取数据的方法
    async getSpusList() {
      if (!this.category.category3Id) return
      this.isLoading = true
      const res = await getSpuListApi(
        this.pagination.page,
        this.pagination.limit,
        this.category.category3Id
      )
      this.tableData = res.data.records
      this.pagination.total = res.data.total
      this.isLoading = false
    },
    // 改变pageSize
    handleSizeChange(size) {
      this.pagination.limit = size
    },
    // 切换页码
    handleCurrentChange(page) {
      this.pagination.page = page
    },
    // 编辑 spu
    editSpu(data) {
      this.$emit('setSpuData', data)
      this.$emit('changShowNum', 2)
    },
    // 添加 spu
    addSpu() {
      this.$emit('setSpuData')
      this.$emit('changShowNum', 2)
    },
    // 删除 spu
    async delSpu(id) {
      if (!confirm('确定删除？')) return
      await deleteSpuApi(id)
      this.getSpusList()
      this.$message.success('删除成功')
    },
    // 获取sku 的方法
    async getSku(row) {
      console.log(row)
      const res = await getkuBySpuIdApi(row.id)
      this.skuList = res.data
      this.dialogVisible = true
      this.skuListName = row.spuName
      console.log(res)
    }
  }
}
</script>

<style>
.mb-20 {
  margin-bottom: 20px;
}
.sku-img {
  height: 100px;
}
</style>
